/// <reference path="../lib/bs4/scss/_variables.scss" />


//
// RFS
// --------------------------------------------------

$enable-rfs:                    false;
$rfs-spacers:                   () !default;


//
// SmartStore CI colors
// --------------------------------------------------

$sm-orange1:                    #ee9B00;
$sm-orange2:                    #e77c00;
$sm-green1:                     #009e74;
$sm-bluegreen:                  #2c8d8a;
$sm-red1:                       #ee1111;
$sm-red2:                       #dc3000;
$sm-red3:                       #db004f;
$sm-blue:                       #307abe;
$sm-blue2:                      #18509f;
$sm-violet:                     #55237d;
$sm-gray1:                      #dadada;
$sm-gray2:                      #bcbcbc;
$sm-gray3:                      #878787;
$sm-gray4:                      #4a4a49;


//
// Backend specific variables
// --------------------------------------------------

$content-padding-x:             30px;
$content-padding-y:             15px;


//
// Shared variables
// --------------------------------------------------

$alert-info-is-primary:         true;
$enable-lightbtn-tweak:         true;
$enable-social-buttons:         false;


//
// BS4 variables
// --------------------------------------------------

$enable-shadows:                true;
$enable-gradients:              false;

$gray-100:                      #f8f9fa;
$gray-200:                      #e9ecef;
$gray-300:                      #dee2e6;
$gray-400:                      #ced4da;
$gray-500:                      #aab5bf;
$gray-600:                      #8d9ba9;
$gray-700:                      #596167;
$gray-800:                      #393f46;
$gray-900:                      #22262a;

$text-muted:                    $gray-500;

$blue:                          $sm-blue;
$indigo:                        $sm-blue2;
$purple:                        $sm-violet;
$pink:                          #e91e63; // Pink 500
$red:                           $sm-red2;
$orange:                        $sm-orange1;
$yellow:                        #fdd835; // Yellow 600
$green:                         $sm-green1;
$teal:                          #009688; // Teal 500
$cyan:                          #00BCD4; // Cyan 500
$bluegrey:                      #78909c; // Bluegrey 500

$primary:                       $blue;
$secondary:                     lighten($gray-200, 2%);
$success:                       $green;
$info:                          $sm-bluegreen;
$warning:                       $orange;
$danger:                        $red;
$light:                         $gray-100;
$dark:                          #001f52;

$theme-colors:                  ( "gray": $gray-700, "primary-dark": $sm-blue2, "warning-dark": $sm-orange2 );

$body-color:                    $gray-800;
$body-bg:                       #fff;
$link-color:                    desaturate(darken($primary, 12%), 0%);

// Set a specific jump point for requesting color jumps
$theme-color-interval:          8%;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:      179;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark:                 $gray-800;
$yiq-text-light:                #fff;

// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$font-size-base:                0.875rem;
$font-size-lg:                  1rem;
$font-size-sm:                  0.8125rem;

$font-weight-light:             100;
$font-weight-normal:            400;
$font-weight-medium:            600;
$font-weight-bold:              700;

$h1-font-size:                  2.25rem;
$h2-font-size:                  1.75rem;
$h3-font-size:                  1.375rem;
$h4-font-size:                  1.25rem;
$h5-font-size:                  1.125rem;
$h6-font-size:                  1rem;

$small-font-size:               90%;
$headings-font-weight:          $font-weight-medium;

$badge-font-size:               85%;
$badge-font-weight:             $font-weight-medium;


$border-radius:                 0.25rem;
$border-radius-sm:              0.2rem;
$border-radius-lg:              0.4rem;


// Shadows

$box-shadow-sm-var:             0 calc(2px * var(--shadow-yoffset, 1)) 16px -2px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.12)), 
                                0 calc(2px * var(--shadow-yoffset, 1)) 3px -2px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.15));
$box-shadow-var:                0 calc(6px * var(--shadow-yoffset, 1)) 24px -5px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.12)), 
                                0 calc(5px * var(--shadow-yoffset, 1)) 12px -5px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.17));
$box-shadow-lg-var:             0 calc(10px * var(--shadow-yoffset, 1)) 40px -4px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.14)), 
                                0 calc(12px * var(--shadow-yoffset, 1)) 28px -12px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.2));
$box-shadow-xl-var:             0 calc(17px * var(--shadow-yoffset, 1)) 70px -7px rgba(var(--shadow-colorbase-rgb), calc(var(--shadow-intensity) * 0.14)), 
                                0 calc(20px * var(--shadow-yoffset, 1)) 48px -12px rgba(var(--shadow-color-rgb), calc(var(--shadow-intensity) * 0.22));

$box-shadow-sm:                 var(--box-shadow);
$box-shadow:                    var(--box-shadow);
$box-shadow-lg:                 var(--box-shadow);

// Tables

$table-cell-padding:            .75rem;
$table-cell-padding-sm:         .3rem;
$table-border-color:            $gray-300;
$table-head-bg:                 #f6f8fa;
$table-head-color:              $gray-700;
$table-accent-bg:               rgba(#000, .015);

$input-btn-focus-width:         .25rem;
$input-btn-focus-color:         rgba($sm-blue2, .25);
$input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-x:           1rem;
$input-btn-padding-y:           0.5625rem;
$input-btn-padding-x-sm:        0.75rem;
$input-btn-padding-y-sm:        0.375rem;
$input-btn-padding-x-lg:        1.5rem;
$input-btn-padding-y-lg:        0.75rem;
$input-btn-line-height:         1.5;
$input-box-shadow:              none;
$input-focus-border-color:      lighten($sm-blue2, 30%);
$input-focus-box-shadow:        none;
$input-border-radius:           $border-radius;
$input-border-radius-lg:        $border-radius-lg;
$input-border-radius-sm:        $border-radius-sm;
$input-transition:              none;
$input-group-addon-bg:          $gray-100;
$input-border-color:            $gray-300;
$input-disabled-bg:             $gray-100;

$btn-font-weight:               $font-weight-medium;
$btn-focus-width:               0; //$input-btn-focus-width;
$btn-box-shadow:                inset 0 0 0 rgba(#fff, 0.15), 0 0 0 rgba(#000, 0.075);
$btn-focus-box-shadow:          $input-btn-focus-box-shadow;
//$btn-active-box-shadow:         inset 0 2px 3px rgba(#000, .125);
$btn-transition:                background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
$btn-border-radius:             $input-border-radius; //.125rem;
$btn-border-radius-lg:          $input-border-radius-lg; //.1875rem;
$btn-border-radius-sm:          $input-border-radius-sm; //.125rem;
$btn-disabled-opacity:          0.5;

$dropdown-min-width:            10rem;
//$dropdown-box-shadow:			$box-shadow-var; // 0 3px 12px rgba(27,31,35, 0.15); //0 2px 6px rgba(#000, .15);
//$dropdown-border-color:			rgba(#000, 0.05);
$dropdown-bg:                   #fff;
$dropdown-box-shadow:           $box-shadow-lg-var;
$dropdown-border-color:         $gray-200;
$dropdown-link-color:           $gray-700;
$dropdown-link-hover-color:     darken($dropdown-link-color, 5%);
$dropdown-link-hover-bg:        lighten($gray-200, 3%);
$dropdown-link-active-color:    $dropdown-link-hover-color;
$dropdown-link-active-bg:       lighten($dropdown-link-hover-bg, 5%);
$dropdown-item-padding-y:       0.625rem;
$dropdown-item-padding-x:       1.5rem;
$dropdown-header-color:         $text-muted;
$dropdown-link-disabled-color:  $gray-500;

$popover-font-size:             $font-size-base;
$popover-box-shadow:            $dropdown-box-shadow;
$popover-border-color:          $dropdown-border-color;

$alert-padding-y:               1rem;
$alert-link-font-weight:        $font-weight-medium;
//$alert-border-radius:			0;
    
$nav-tabs-border-color:         #e1e4e8;
$nav-tabs-link-active-color:    $gray-900;

$nav-pills-link-active-color:   #fff;
$nav-pills-link-active-bg:      $primary;

$component-active-bg:           lighten($primary, 36%);
$component-active-color:        inherit;


$modal-inner-padding:           1.25rem;
$modal-header-padding:          1.25rem;
$modal-content-border-width:    0;
$modal-content-border-color:    rgba(#000, 0.06);
$modal-content-border-radius:   $border-radius-lg;
$modal-backdrop-bg:             #000;
$modal-backdrop-opacity:        .68;
$modal-content-box-shadow-xs:   $box-shadow-var;
$modal-content-box-shadow-sm-up:$box-shadow-lg-var;
$modal-transition:              all 0.2s ease-out;


// Embeds (TODO: Use from v4.3 onwards)
$embed-responsive-aspect-ratios: ( (21 9), (16 9), (16 10), (4 3), (1 1) );


$custom-control-indicator-bg:               $gray-200;
$custom-control-indicator-disabled-bg:      $gray-100;
$custom-control-indicator-checked-color:    #fff;
$custom-control-indicator-checked-bg:       $warning;
$custom-control-indicator-active-color:     #fff;
$custom-control-indicator-active-bg:        lighten($warning, 35%);
$custom-checkbox-indicator-indeterminate-bg:$warning;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($warning, .25);


// Custom Range

$custom-range-track-height:         0.315rem;
$custom-range-track-bg:             rgba(#000, 0.12);
$custom-range-track-border-radius:  0;
$custom-range-track-box-shadow:     none;

$custom-range-thumb-width:                  0.925rem;
$custom-range-thumb-bg:                     $primary;
$custom-range-thumb-box-shadow:             0 1px .25rem rgba($primary, .2);
$custom-range-thumb-focus-box-shadow:       0 0 0 1px $body-bg, 0 0 0 3px $input-btn-focus-color;
$custom-range-thumb-focus-box-shadow-width: 1px; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg:              lighten($primary, 20%);


// Dashboard

$chart-color-danger:            lighten($danger, 40%);
$chart-color-danger-dark:       lighten($danger, 15%);
$chart-color-danger-light:      lighten($danger, 55%);
$chart-color-warning:           lighten($warning, 25%);
$chart-color-warning-dark:      lighten($warning, 10%);
$chart-color-warning-light:     lighten($warning, 40%);
$chart-color-success:           lighten($success, 50%);
$chart-color-success-dark:      lighten($success, 10%);
$chart-color-success-light:     lighten($success, 65%);
$chart-color-primary:           lighten($primary, 35%);
$chart-color-primary-dark:      lighten($primary, 15%);
$chart-color-primary-light:     lighten($primary, 50%);


// Misc

$card-border-color:             rgba(#000, 0.1);